<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多站点项目</title>
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">#}
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>#}

    <link href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='bootstrap/bootstrap-icons-1.11.1/bootstrap-icons.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static',filename='jquery/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <style>
    :root {
        --primary-color: #2E7D32;
        --secondary-color: #81C784;
        --accent-color: #DCEDC8;
        --text-color: #212121;
        --light-text: #757575;
        --light-green: #E8F5E9;
        --dark-green: #1B5E20;
        --amber: #FFD54F;
        --brown: #795548;
        --leaf-green: #66BB6A;
    }

    body {
        background-color: #F8F9FA;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.344 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.414L60 42.143v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413L30 11.8l7.07 7.414v-.002zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%2381c784' fill-opacity='0.07' fill-rule='evenodd'/%3E%3C/svg%3E");
        color: var(--text-color);
        padding: 1.5rem;
        min-height: 100vh;
        font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "IBM Plex Mono", "Fira Code", monospace;
    }

    /* 页面标题部分 */
    .page-header {
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0.8rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }

    .page-title {
        color: var(--primary-color);
        font-weight: 700;
        font-size: 2rem;
        margin-bottom: 0;
        position: relative;
        padding-left: 2.2rem;
    }

    .page-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1.8rem;
        height: 1.8rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232E7D32' d='M12 3L1 9L5 11.18V17.18L12 21L19 17.18V11.18L21 10.09V17H23V9L12 3M18.82 9L12 12.72L5.18 9L12 5.28L18.82 9M17 16L12 18.72L7 16V12.27L12 15L17 12.27V16Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
    }

    .project-name {
        font-weight: 600;
        color: var(--dark-green);
        background-color: var(--light-green);
        padding: 0.3rem 0.7rem;
        border-radius: 4px;
        margin-left: 0.5rem;
        font-size: 1.3rem;
    }

    .header-actions {
        display: flex;
        gap: 1rem;
    }

    .btn-back {
        background-color: white;
        border-color: rgba(0, 0, 0, 0.1);
        color: var(--light-text);
        padding: 0.6rem 1.2rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-back:hover {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
        border-color: rgba(0, 0, 0, 0.2);
    }

    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        padding: 0.6rem 1.2rem;
        border-radius: 8px;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background-color: var(--dark-green);
        border-color: var(--dark-green);
        box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4);
        transform: translateY(-2px);
    }

    /* 参数部分 */
    .parameter-section {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin-bottom: 1.5rem;
        position: relative;
    }

    .parameter-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg, var(--leaf-green), var(--secondary-color));
    }

    .parameter-header {
        padding: 1rem 1.5rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .parameter-title {
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 0;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
    }

    .parameter-title i {
        margin-right: 0.5rem;
        color: var(--leaf-green);
        font-size: 1.35rem;
    }

    .parameter-subtitle {
        color: var(--light-text);
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }

    .parameter-content {
        padding: 1rem 1.5rem;
    }

    /* 表单样式 */
    .form-group {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        background-color: rgba(0, 0, 0, 0.01);
        border-radius: 6px;
        padding: 0.5rem;
        transition: background-color 0.2s ease;
        gap: 10px;
    }

    .form-group:hover {
        background-color: rgba(129, 199, 132, 0.05);
    }

    .form-label {
        flex: 0 0 180px;
        white-space: nowrap;
        margin-bottom: 0;
        font-weight: 500;
        color: var(--primary-color);
        padding-left: 0.5rem;
        border-left: 3px solid var(--secondary-color);
    }

    .form-control, .form-select {
        flex: 1;
        padding: 0.4rem 0.7rem;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        line-height: 1.4;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 2px rgba(129, 199, 132, 0.2);
    }

    /* 事件卡片样式 */
    .event-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .event-card-header {
        padding: 0.7rem 1rem;
        background-color: var(--light-green);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .event-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 0;
        display: flex;
        align-items: center;
    }

    .event-title i {
        margin-right: 0.5rem;
    }

    .event-card-body {
        padding: 0.7rem 1rem;
    }

    /* 按钮样式 */
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }

    .btn-outline-primary {
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .btn-outline-primary:hover {
        background-color: var(--primary-color);
        color: white;
    }

    .btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
    }

    .btn-danger:hover {
        background-color: #bd2130;
        border-color: #bd2130;
    }

    /* 输出变量标签样式 */
    .tag-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 32px;
        padding: 0.3rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #f9f9f9;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        background-color: var(--light-green);
        color: var(--dark-green);
        padding: 3px 10px;
        border-radius: 16px;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 0.2rem;
    }

    .delete-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-left: 8px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.1);
        color: var(--dark-green);
        font-weight: bold;
        cursor: pointer;
        line-height: 1;
        transition: all 0.2s ease;
    }

    .delete-btn:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }

    /* 站点行样式 */
    .site-row {
        margin-bottom: 1rem;
    }

    /* 可选参数样式 */
    .optional-params-toggle {
        margin-bottom: 1rem;
        padding: 0.75rem;
        background-color: rgba(0, 0, 0, 0.02);
        border-radius: 8px;
    }

    .optional-param {
        margin-bottom: 0.5rem;
    }

    /* 返回顶部按钮 */
    .back-to-top {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-color: var(--primary-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1000;
    }

    .back-to-top.visible {
        opacity: 1;
    }

    .back-to-top:hover {
        background-color: var(--dark-green);
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    /* 浮动提示 */
    .floating-alert {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        min-width: 300px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* 事件行样式优化 */
    .event-row {
        padding: 0.3rem;
        border-radius: 6px;
        transition: all 0.2s ease;
        margin-bottom: 0.5rem;
    }

    .event-row:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }

    /* 响应式样式 */
    @media (max-width: 768px) {
        .page-title {
            font-size: 1.6rem;
        }

        .project-name {
            display: block;
            margin: 0.5rem 0 0;
            width: fit-content;
        }

        .header-actions {
            flex-direction: column;
            gap: 0.5rem;
        }

        body {
            padding: 1rem;
        }

        .form-group {
            flex-direction: column;
            align-items: flex-start;
            padding: 0.4rem;
        }

        .form-label {
            flex: none;
            width: 100%;
            border-left: none;
            border-bottom: 2px solid var(--secondary-color);
            padding-left: 0;
            padding-bottom: 0.3rem;
            margin-bottom: 0.5rem;
        }

        .form-control, .form-select {
            width: 100%;
        }
    }
    </style>
</head>
<body>
    <div class="container-fluid p-0">
        <!-- 页面标题和返回按钮 -->
        <div class="page-header">
            <h1 class="page-title">多站点项目<span class="project-name">{{ project.projectname if project else 'New MultiSite Project' }}</span></h1>
            <div class="header-actions">
                <button type="button" class="btn btn-back" onclick="window.location.href='{{ url_for('func.myprojects') }}'">
                    <i class="bi bi-arrow-left"></i> 返回
                </button>
                <button type="button" id="submitButton" class="btn btn-primary">
                    <i class="bi bi-save"></i> 保存并提交
                </button>
            </div>
        </div>

        <!-- 表单开始 -->
        <form id="multi-site-form" method="POST" action="{{ url_for('calc.EnterMultiSite', projectId=project.id if project else 0) }}">
            <!-- 基本信息部分 -->
            <div class="parameter-section">
                <div class="parameter-header">
                    <h2 class="parameter-title">
                        <i class="bi bi-sliders"></i> 基本信息
                    </h2>
                    <p class="parameter-subtitle">设置项目和模型基本参数</p>
                </div>
                <div class="parameter-content">
                    <div class="row">
                        <div class="col-md-6" style="display: none;">
                            <div class="form-group mb-3">
                                <label for="projectname" class="form-label">项目名称：</label>
                                <input type="text" id="projectname" name="projectname" value="{{ project.projectname if project else 'New MultiSite Project' }}" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="species" class="form-label">默认树种：</label>
                                <select id="species" name="species" class="form-select" required>
                                    {% for species in species_list %}
                                    <option value="{{ species.speciesname }}" {% if data_input.get('Species') == species.speciesname %}selected{% endif %}>
                                        {{ species.speciesname }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="end_age" class="form-label">结束年龄(年)：</label>
                                <input type="number" id="end_age" name="end_age" value="{{ data_input.get('End_age', 10) }}" min="0" step="1" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="month_planted" class="form-label">种植月份：</label>
                                <select id="month_planted" name="month_planted" class="form-select">
                                    {% for month in ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] %}
                                    <option value="{{ month }}" {% if data_input.get('Month_planted') == month %}selected{% endif %}>{{ month }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="output_frequency" class="form-label">输出频率：</label>
                                <select id="output_frequency" name="output_frequency" class="form-select">
                                    <option value="m" {% if data_input.get('Output_frequency', 'm') == 'm' %}selected{% endif %}>月度</option>
                                    <option value="a" {% if data_input.get('Output_frequency', 'm') == 'a' %}selected{% endif %}>年度</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="interpolate_lookups" class="form-label">内插查找表：</label>
                                <select id="interpolate_lookups" name="interpolate_lookups" class="form-select">
                                    <option value="True" {% if data_input.get('Interpolate_lookups') == 'True' %}selected{% endif %}>是</option>
                                    <option value="False" {% if data_input.get('Interpolate_lookups') == 'False' %}selected{% endif %}>否</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 输出变量选择部分 -->
            <div class="parameter-section" style="display: none;">
                <div class="parameter-header">
                    <h2 class="parameter-title">
                        <i class="bi bi-graph-up"></i> 输出变量
                    </h2>
                    <p class="parameter-subtitle">选择模型运行后要输出的变量</p>
                </div>
                <div class="parameter-content">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="output-selector" class="form-label">选择变量：</label>
                                <div class="input-group">
                                    <select id="output-selector" class="form-select">
                                        <option value="">选择一个变量</option>
                                        <option value="stemNo">stemNo</option>
                                        <option value="WF">WF</option>
                                        <option value="WR">WR</option>
                                        <option value="WS">WS</option>
                                        <option value="WL">WL</option>
                                        <option value="standVol">standVol</option>
                                        <option value="LAI">LAI</option>
                                        <option value="avDBH">avDBH</option>
                                        <!-- 更多变量选项... -->
                                    </select>
                                    <button type="button" id="add-output" class="btn btn-primary">
                                        <i class="bi bi-plus"></i> 添加
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <label class="form-label">已选变量：</label>
                            <div class="tag-container" id="output-container">
                                {% if data_input.get('Output_data') %}
                                    {% for var in data_input.get('Output_data').split(',') %}
                                        <div class="tag">
                                            <span>{{ var.strip() }}</span>
                                            <span class="delete-btn">×</span>
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    {% for var in 'standVol,LAI,stemNo'.split(',') %}
                                        <div class="tag">
                                            <span>{{ var.strip() }}</span>
                                            <span class="delete-btn">×</span>
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                            <input type="hidden" name="output_data" id="output-data-hidden" value="{{ data_input.get('Output_data', 'standVol,LAI,stemNo') }}">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 站点配置部分 -->
            <div class="parameter-section">
                <div class="parameter-header">
                    <h2 class="parameter-title">
                        <i class="bi bi-geo-alt"></i> 站点配置
                    </h2>
                    <p class="parameter-subtitle">添加和配置模型运行的站点</p>
                </div>
                <div class="parameter-content">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="site-selector" class="form-label">添加站点：</label>
                                <div class="input-group">
                                    <select id="site-selector" class="form-select">
                                        <option value="">选择站点</option>
                                        {% for site in sites %}
                                            <option value="{{ site.sitename }}">{{ site.sitename }}</option>
                                        {% endfor %}
                                    </select>
                                    <button type="button" id="add-site" class="btn btn-primary">
                                        <i class="bi bi-plus"></i> 添加
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="sites-container">
                        {% if data_input.get('Sites') %}
                            {% for site in data_input.get('Sites') %}
                                <div class="site-row event-card mb-4">
                                    <div class="event-card-header d-flex justify-content-between align-items-center">
                                        <h3 class="event-title"><i class="bi bi-pin-map"></i> 站点: {{ site.sitename }}</h3>
                                        <button type="button" class="btn btn-sm btn-danger remove-site">
                                            <i class="bi bi-trash"></i> 移除
                                        </button>
                                    </div>
                                    <div class="event-card-body">
                                        <input type="hidden" name="sites[{{ loop.index0 }}][sitename]" value="{{ site.sitename }}">

                                        <div class="row mb-3">
                                            <div class="col-12">
                                                <div class="optional-params-toggle">
                                                    <label class="form-label fw-bold">可选参数：</label>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="lat-{{ loop.index0 }}" data-param="latitude" {% if site.get('Latitude') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="lat-{{ loop.index0 }}">纬度</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="fr-{{ loop.index0 }}" data-param="fr" {% if site.get('FR') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="fr-{{ loop.index0 }}">肥力评级</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="max-asw-{{ loop.index0 }}" data-param="max_asw" {% if site.get('maxASW') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="max-asw-{{ loop.index0 }}">最大可用土壤水分</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="min-asw-{{ loop.index0 }}" data-param="min_asw" {% if site.get('minASW') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="min-asw-{{ loop.index0 }}">最小可用土壤水分</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="soil-{{ loop.index0 }}" data-param="soil_type" {% if site.get('Soil_class') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="soil-{{ loop.index0 }}">土壤类型</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="stock-{{ loop.index0 }}" data-param="initial_stocking" {% if site.get('Initial_stocking') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="stock-{{ loop.index0 }}">初始株数</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="gammaN-{{ loop.index0 }}" data-param="gammaNx" {% if site.get('gammaNx') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="gammaN-{{ loop.index0 }}">gammaNx</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="alphaC-{{ loop.index0 }}" data-param="alphaCx" {% if site.get('alphaCx') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="alphaC-{{ loop.index0 }}">alphaCx</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="checkbox" class="form-check-input toggle-param" id="planted-{{ loop.index0 }}" data-param="planted_year" {% if site.get('planted_year') is not none %}checked{% endif %}>
                                                        <label class="form-check-label" for="planted-{{ loop.index0 }}">种植年份</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="latitude" {% if site.get('Latitude') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">纬度：</label>
                                                    <input type="number" name="sites[{{ loop.index0 }}][latitude]" value="{{ site.get('Latitude', '') }}" step="0.1" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="fr" {% if site.get('FR') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">肥力评级(FR)：</label>
                                                    <input type="number" name="sites[{{ loop.index0 }}][fr]" value="{{ site.get('FR', '') }}" min="0" max="1" step="0.01" class="form-control">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="max_asw" {% if site.get('maxASW') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">最大可用土壤水分(mm)：</label>
                                                    <input type="number" name="sites[{{ loop.index0 }}][max_asw]" value="{{ site.get('maxASW', '') }}" min="0" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="min_asw" {% if site.get('minASW') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">最小可用土壤水分(mm)：</label>
                                                    <input type="number" name="sites[{{ loop.index0 }}][min_asw]" value="{{ site.get('minASW', '') }}" min="0" class="form-control">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="soil_type" {% if site.get('Soil_class') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">土壤类型：</label>
                                                    <select name="sites[{{ loop.index0 }}][soil_type]" class="form-control">
                                                        <option value="S" {% if site.get('Soil_class') == 'S' %}selected{% endif %}>S</option>
                                                        <option value="SL" {% if site.get('Soil_class') == 'SL' %}selected{% endif %}>SL</option>
                                                        <option value="CL" {% if site.get('Soil_class') == 'CL' %}selected{% endif %}>CL</option>
                                                        <option value="C" {% if site.get('Soil_class') == 'C' %}selected{% endif %}>C</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="initial_stocking" {% if site.get('Initial_stocking') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">初始株数(trees/ha)：</label>
                                                    <input type="number" name="sites[{{ loop.index0 }}][initial_stocking]" value="{{ site.get('Initial_stocking', '') }}" min="0" class="form-control">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="gammaNx" {% if site.get('gammaNx') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">gammaNx：</label>
                                                    <input type="number" name="sites[{{ loop.index0 }}][gammaNx]" value="{{ site.get('gammaNx', '') }}" min="0" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="alphaCx" {% if site.get('alphaCx') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">alphaCx：</label>
                                                    <input type="number" name="sites[{{ loop.index0 }}][alphaCx]" value="{{ site.get('alphaCx', '0.06') }}" step="0.01" min="0" class="form-control">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="optional-param form-group mb-3" data-param="planted_year" {% if site.get('planted_year') is not none %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                                                    <label class="form-label">种植年份：</label>
                                                    <input type="number" name="sites[{{ loop.index0 }}][planted_year]" value="{{ site.get('planted_year', '1990') }}" min="1900" max="2100" class="form-control">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 营林事件部分 -->
            <div class="parameter-section">
                <div class="parameter-header">
                    <h2 class="parameter-title">
                        <i class="bi bi-calendar-event"></i> 营林事件
                    </h2>
                    <p class="parameter-subtitle">设置模型中的造林管理事件</p>
                </div>
                <div class="parameter-content">
                    <div class="row">
                        <!-- 间伐事件 -->
                        <div class="col-md-6">
                            <div class="event-card mb-4">
                                <div class="event-card-header">
                                    <h3 class="event-title"><i class="bi bi-scissors"></i> 间伐管理</h3>
                                </div>
                                <div class="event-card-body">
                                    <div id="thinning-container">
                                        {% if data_input.get('Thinning') %}
                                            {% for event in data_input.get('Thinning') %}
                                                <div class="event-row mb-2">
                                                    <div class="row g-2">
                                                        <div class="col">
                                                            <input type="number" name="thinning[{{ loop.index0 }}][age]" value="{{ event.Age }}" placeholder="年龄" class="form-control" required>
                                                        </div>
                                                        <div class="col">
                                                            <input type="number" name="thinning[{{ loop.index0 }}][stems]" value="{{ event.residual_stems }}" placeholder="剩余株数" class="form-control" required>
                                                        </div>
                                                        <div class="col">
                                                            <input type="number" name="thinning[{{ loop.index0 }}][wf_frac]" value="{{ event.thinWF }}" placeholder="WF比例" step="0.01" class="form-control" required>
                                                        </div>
                                                        <div class="col">
                                                            <input type="number" name="thinning[{{ loop.index0 }}][wr_frac]" value="{{ event.thinWR }}" placeholder="WR比例" step="0.01" class="form-control" required>
                                                        </div>
                                                        <div class="col">
                                                            <input type="number" name="thinning[{{ loop.index0 }}][ws_frac]" value="{{ event.thinWS }}" placeholder="WS比例" step="0.01" class="form-control" required>
                                                        </div>
                                                        <div class="col-auto">
                                                            <button type="button" class="btn btn-sm btn-danger remove-event">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        {% else %}
                                            <div class="event-row mb-2">
                                                <div class="row g-2">
                                                    <div class="col">
                                                        <input type="number" name="thinning[0][age]" placeholder="年龄" class="form-control" required>
                                                    </div>
                                                    <div class="col">
                                                        <input type="number" name="thinning[0][stems]" placeholder="剩余株数" class="form-control" required>
                                                    </div>
                                                    <div class="col">
                                                        <input type="number" name="thinning[0][wf_frac]" placeholder="WF比例" step="0.01" class="form-control" required>
                                                    </div>
                                                    <div class="col">
                                                        <input type="number" name="thinning[0][wr_frac]" placeholder="WR比例" step="0.01" class="form-control" required>
                                                    </div>
                                                    <div class="col">
                                                        <input type="number" name="thinning[0][ws_frac]" placeholder="WS比例" step="0.01" class="form-control" required>
                                                    </div>
                                                    <div class="col-auto">
                                                        <button type="button" class="btn btn-sm btn-danger remove-event">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="mt-2">
                                        <button type="button" id="add-thinning" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-plus"></i> 添加间伐事件
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 落叶事件 -->
                        <div class="col-md-6">
                            <div class="event-card mb-4">
                                <div class="event-card-header">
                                    <h3 class="event-title"><i class="bi bi-tree"></i> 落叶管理</h3>
                                </div>
                                <div class="event-card-body">
                                    <div id="defoliation-container">
                                        {% if data_input.get('Defoliation') %}
                                            {% for event in data_input.get('Defoliation') %}
                                                <div class="event-row mb-2">
                                                    <div class="row g-2">
                                                        <div class="col">
                                                            <input type="number" name="defoliation[{{ loop.index0 }}][age]" value="{{ event.Age }}" placeholder="年龄" class="form-control" required>
                                                        </div>
                                                        <div class="col">
                                                            <input type="number" name="defoliation[{{ loop.index0 }}][foliage_remaining]" value="{{ event.defol_fraction }}" placeholder="剩余叶片比例" step="0.01" class="form-control" required>
                                                        </div>
                                                        <div class="col-auto">
                                                            <button type="button" class="btn btn-sm btn-danger remove-event">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        {% else %}
                                            <div class="event-row mb-2">
                                                <div class="row g-2">
                                                    <div class="col">
                                                        <input type="number" name="defoliation[0][age]" placeholder="年龄" class="form-control" required>
                                                    </div>
                                                    <div class="col">
                                                        <input type="number" name="defoliation[0][foliage_remaining]" placeholder="剩余叶片比例" step="0.01" class="form-control" required>
                                                    </div>
                                                    <div class="col-auto">
                                                        <button type="button" class="btn btn-sm btn-danger remove-event">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="mt-2">
                                        <button type="button" id="add-defoliation" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-plus"></i> 添加落叶事件
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 肥力事件 -->
                        <div class="col-md-6">
                            <div class="event-card mb-4">
                                <div class="event-card-header">
                                    <h3 class="event-title"><i class="bi bi-water"></i> 肥力管理</h3>
                                </div>
                                <div class="event-card-body">
                                    <div id="fertility-container">
                                        {% if data_input.get('Fertility') %}
                                            {% for event in data_input.get('Fertility') %}
                                                <div class="event-row mb-2">
                                                    <div class="row g-2">
                                                        <div class="col">
                                                            <input type="number" name="fertility[{{ loop.index0 }}][age]" value="{{ event.Age }}" placeholder="年龄" class="form-control" required>
                                                        </div>
                                                        <div class="col">
                                                            <input type="number" name="fertility[{{ loop.index0 }}][fr]" value="{{ event.FR }}" placeholder="肥力评级" step="0.01" class="form-control" required>
                                                        </div>
                                                        <div class="col-auto">
                                                            <button type="button" class="btn btn-sm btn-danger remove-event">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        {% else %}
                                            <div class="event-row mb-2">
                                                <div class="row g-2">
                                                    <div class="col">
                                                        <input type="number" name="fertility[0][age]" placeholder="年龄" class="form-control" required>
                                                    </div>
                                                    <div class="col">
                                                        <input type="number" name="fertility[0][fr]" placeholder="肥力评级" step="0.01" class="form-control" required>
                                                    </div>
                                                    <div class="col-auto">
                                                        <button type="button" class="btn btn-sm btn-danger remove-event">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="mt-2">
                                        <button type="button" id="add-fertility" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-plus"></i> 添加肥力事件
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 灌溉事件 -->
                        <div class="col-md-6">
                            <div class="event-card mb-4">
                                <div class="event-card-header">
                                    <h3 class="event-title"><i class="bi bi-droplet"></i> 灌溉管理</h3>
                                </div>
                                <div class="event-card-body">
                                    <div id="irrigation-container">
                                        {% if data_input.get('Irrigation') %}
                                            {% for event in data_input.get('Irrigation') %}
                                                <div class="event-row mb-2">
                                                    <div class="row g-2">
                                                        <div class="col">
                                                            <input type="number" name="irrigation[{{ loop.index0 }}][age]" value="{{ event.Age }}" placeholder="年龄" class="form-control" required>
                                                        </div>
                                                        <div class="col">
                                                            <input type="number" name="irrigation[{{ loop.index0 }}][irrigation]" value="{{ event.irrig }}" placeholder="灌溉量(ML/ha/yr)" class="form-control" required>
                                                        </div>
                                                        <div class="col-auto">
                                                            <button type="button" class="btn btn-sm btn-danger remove-event">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        {% else %}
                                            <div class="event-row mb-2">
                                                <div class="row g-2">
                                                    <div class="col">
                                                        <input type="number" name="irrigation[0][age]" placeholder="年龄" class="form-control" required>
                                                    </div>
                                                    <div class="col">
                                                        <input type="number" name="irrigation[0][irrigation]" placeholder="灌溉量(ML/ha/yr)" class="form-control" required>
                                                    </div>
                                                    <div class="col-auto">
                                                        <button type="button" class="btn btn-sm btn-danger remove-event">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="mt-2">
                                        <button type="button" id="add-irrigation" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-plus"></i> 添加灌溉事件
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>

        <!-- 返回顶部按钮 -->
        <div id="backToTop" class="back-to-top">
            <i class="bi bi-arrow-up"></i>
        </div>
    </div>

    <!-- Script 部分将在后续添加 -->
    <script>
        $(document).ready(function() {
            // 初始化页面
            initPage();

            // 输出变量标签处理
            setupOutputVariables();

            // 站点添加与移除
            setupSiteHandling();

            // 营林事件处理
            setupEventHandling();

            // 表单提交处理
            setupFormSubmission();
        });

        // 初始化页面功能
        function initPage() {
            // 当窗口滚动时显示/隐藏返回顶部按钮
            $(window).scroll(function() {
                const scrollPosition = $(window).scrollTop();

                // 如果滚动超过300px，显示返回顶部按钮
                if (scrollPosition > 300) {
                    $('#backToTop').addClass('visible');
                } else {
                    $('#backToTop').removeClass('visible');
                }
            });

            // 添加返回顶部按钮功能
            $('#backToTop').click(function() {
                $('html, body').animate({ scrollTop: 0 }, 'slow');
                return false;
            });

            // 连接提交按钮与表单
            $('#submitButton').click(function() {
                $('#multi-site-form').submit();
            });

            // 初始化可选参数切换
            $('.toggle-param').each(function() {
                $(this).change(function() {
                    const param = $(this).data('param');
                    const container = $(this).closest('.site-row');
                    container.find(`.optional-param[data-param="${param}"]`).toggle(this.checked);
                });
            });
        }

        // 设置输出变量处理
        function setupOutputVariables() {
            const outputContainer = $('#output-container');
            const outputSelector = $('#output-selector');
            const addOutputBtn = $('#add-output');
            const outputHidden = $('#output-data-hidden');

            function updateHiddenInput() {
                const tags = outputContainer.find('.tag span:not(.delete-btn)');
                const values = $.map(tags, function(tag) {
                    return $(tag).text().trim();
                });
                outputHidden.val(values.join(','));
            }

            // 添加输出变量
            addOutputBtn.click(function() {
                const selectedValue = outputSelector.val();
                if (!selectedValue) {
                    showAlert('请选择一个变量', 'warning');
                    return;
                }

                // 检查是否已添加
                const existingTags = outputContainer.find('.tag span:not(.delete-btn)');
                for (let i = 0; i < existingTags.length; i++) {
                    if ($(existingTags[i]).text().trim() === selectedValue) {
                        showAlert('此变量已添加', 'warning');
                        return;
                    }
                }

                // 创建新标签
                const tagDiv = $('<div class="tag"></div>');
                tagDiv.html(`<span>${selectedValue}</span><span class="delete-btn">×</span>`);
                tagDiv.find('.delete-btn').click(function() {
                    $(this).parent().remove();
                    updateHiddenInput();
                });

                outputContainer.append(tagDiv);
                updateHiddenInput();
                outputSelector.val('');
            });

            // 为已有标签绑定删除事件
            outputContainer.find('.delete-btn').click(function() {
                $(this).parent().remove();
                updateHiddenInput();
            });

            // 初始化隐藏字段
            updateHiddenInput();
        }

        // 设置站点处理
        function setupSiteHandling() {
            const sitesContainer = $('#sites-container');
            const addSiteButton = $('#add-site');
            const siteSelector = $('#site-selector');

            // 计算当前站点数量
            let siteCount = sitesContainer.children('.site-row').length;

            // 站点初始化函数
            function initializeSiteParams(siteRow) {
                siteRow.find('.toggle-param').each(function() {
                    $(this).change(function() {
                        const param = $(this).data('param');
                        siteRow.find(`.optional-param[data-param="${param}"]`).toggle(this.checked);
                    });
                });
            }

            // 为已有站点绑定事件
            sitesContainer.children('.site-row').each(function() {
                const siteRow = $(this);

                // 绑定移除站点事件
                siteRow.find('.remove-site').click(function() {
                    siteRow.fadeOut(300, function() {
                        $(this).remove();
                    });
                });

                // 初始化参数切换
                initializeSiteParams(siteRow);
            });

            // 添加新站点
            addSiteButton.click(function() {
                const selectedValue = siteSelector.val();
                if (!selectedValue) {
                    showAlert('请选择一个站点', 'warning');
                    return;
                }

                // 检查是否已添加
                let isDuplicate = false;
                sitesContainer.children('.site-row').each(function() {
                    const sitename = $(this).find('input[name$="[sitename]"]').val();
                    if (sitename === selectedValue) {
                        isDuplicate = true;
                        return false;
                    }
                });

                if (isDuplicate) {
                    showAlert('此站点已添加', 'warning');
                    return;
                }

                // 创建新站点行
                const newSiteRow = $(`
                    <div class="site-row event-card mb-4" style="display: none;">
                        <div class="event-card-header d-flex justify-content-between align-items-center">
                            <h3 class="event-title"><i class="bi bi-pin-map"></i> 站点: ${selectedValue}</h3>
                            <button type="button" class="btn btn-sm btn-danger remove-site">
                                <i class="bi bi-trash"></i> 移除
                            </button>
                        </div>
                        <div class="event-card-body">
                            <input type="hidden" name="sites[${siteCount}][sitename]" value="${selectedValue}">

                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="optional-params-toggle">
                                        <label class="form-label fw-bold">可选参数：</label>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="lat-${siteCount}" data-param="latitude">
                                            <label class="form-check-label" for="lat-${siteCount}">纬度</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="fr-${siteCount}" data-param="fr">
                                            <label class="form-check-label" for="fr-${siteCount}">肥力评级</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="max-asw-${siteCount}" data-param="max_asw">
                                            <label class="form-check-label" for="max-asw-${siteCount}">最大可用土壤水分</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="min-asw-${siteCount}" data-param="min_asw">
                                            <label class="form-check-label" for="min-asw-${siteCount}">最小可用土壤水分</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="soil-${siteCount}" data-param="soil_type">
                                            <label class="form-check-label" for="soil-${siteCount}">土壤类型</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="stock-${siteCount}" data-param="initial_stocking">
                                            <label class="form-check-label" for="stock-${siteCount}">初始株数</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="gammaN-${siteCount}" data-param="gammaNx">
                                            <label class="form-check-label" for="gammaN-${siteCount}">gammaNx</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="alphaC-${siteCount}" data-param="alphaCx">
                                            <label class="form-check-label" for="alphaC-${siteCount}">alphaCx</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="checkbox" class="form-check-input toggle-param" id="planted-${siteCount}" data-param="planted_year">
                                            <label class="form-check-label" for="planted-${siteCount}">种植年份</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="latitude" style="display: none;">
                                        <label class="form-label">纬度：</label>
                                        <input type="number" name="sites[${siteCount}][latitude]" step="0.1" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="fr" style="display: none;">
                                        <label class="form-label">肥力评级(FR)：</label>
                                        <input type="number" name="sites[${siteCount}][fr]" value="1" min="0" max="1" step="0.01" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="max_asw" style="display: none;">
                                        <label class="form-label">最大可用土壤水分(mm)：</label>
                                        <input type="number" name="sites[${siteCount}][max_asw]" value="190" min="0" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="min_asw" style="display: none;">
                                        <label class="form-label">最小可用土壤水分(mm)：</label>
                                        <input type="number" name="sites[${siteCount}][min_asw]" value="0" min="0" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="soil_type" style="display: none;">
                                        <label class="form-label">土壤类型：</label>
                                        <select name="sites[${siteCount}][soil_type]" class="form-select">
                                            <option value="S">S</option>
                                            <option value="SL">SL</option>
                                            <option value="CL" selected>CL</option>
                                            <option value="C">C</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="initial_stocking" style="display: none;">
                                        <label class="form-label">初始株数(trees/ha)：</label>
                                        <input type="number" name="sites[${siteCount}][initial_stocking]" value="2500" min="0" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="gammaNx" style="display: none;">
                                        <label class="form-label">gammaNx：</label>
                                        <input type="number" name="sites[${siteCount}][gammaNx]" value="1" min="0" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="alphaCx" style="display: none;">
                                        <label class="form-label">alphaCx：</label>
                                        <input type="number" name="sites[${siteCount}][alphaCx]" value="0.06" step="0.01" min="0" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="optional-param form-group mb-3" data-param="planted_year" style="display: none;">
                                        <label class="form-label">种植年份：</label>
                                        <input type="number" name="sites[${siteCount}][planted_year]" value="1990" min="1900" max="2100" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `);

                // 绑定移除事件
                newSiteRow.find('.remove-site').click(function() {
                    newSiteRow.fadeOut(300, function() {
                        $(this).remove();
                    });
                });

                sitesContainer.append(newSiteRow);
                newSiteRow.fadeIn(300);
                initializeSiteParams(newSiteRow);
                siteCount++;

                // 重置选择器
                siteSelector.val('');

                // 成功提示
                showAlert('站点添加成功', 'success');
            });
        }

        // 设置营林事件处理
        function setupEventHandling() {
            // 事件类型数组
            const eventTypes = ['thinning', 'defoliation', 'fertility', 'irrigation'];

            // 每种事件的处理
            eventTypes.forEach(function(eventType) {
                const container = $(`#${eventType}-container`);
                const addBtn = $(`#add-${eventType}`);
                let eventCount = container.children('.event-row').length;

                // 初始化已有事件的删除功能
                container.find('.remove-event').click(function() {
                    $(this).closest('.event-row').fadeOut(200, function() {
                        $(this).remove();
                    });
                });

                // 添加新事件
                addBtn.click(function() {
                    // 创建不同类型事件的模板
                    let newEventHtml = '';

                    if (eventType === 'thinning') {
                        newEventHtml = `
                            <div class="event-row mb-2" style="display: none;">
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][age]" placeholder="年龄" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][stems]" placeholder="剩余株数" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][wf_frac]" placeholder="WF比例" step="0.01" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][wr_frac]" placeholder="WR比例" step="0.01" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][ws_frac]" placeholder="WS比例" step="0.01" class="form-control" required>
                                    </div>
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-sm btn-danger remove-event">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                    } else if (eventType === 'defoliation') {
                        newEventHtml = `
                            <div class="event-row mb-2" style="display: none;">
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][age]" placeholder="年龄" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][foliage_remaining]" placeholder="剩余叶片比例" step="0.01" class="form-control" required>
                                    </div>
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-sm btn-danger remove-event">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                    } else if (eventType === 'fertility') {
                        newEventHtml = `
                            <div class="event-row mb-2" style="display: none;">
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][age]" placeholder="年龄" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][fr]" placeholder="肥力评级" step="0.01" class="form-control" required>
                                    </div>
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-sm btn-danger remove-event">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                    } else if (eventType === 'irrigation') {
                        newEventHtml = `
                            <div class="event-row mb-2" style="display: none;">
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][age]" placeholder="年龄" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <input type="number" name="${eventType}[${eventCount}][irrigation]" placeholder="灌溉量(ML/ha/yr)" class="form-control" required>
                                    </div>
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-sm btn-danger remove-event">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                    }

                    // 创建新事件元素
                    const newEvent = $(newEventHtml);

                    // 绑定删除事件
                    newEvent.find('.remove-event').click(function() {
                        newEvent.fadeOut(200, function() {
                            $(this).remove();
                        });
                    });

                    // 添加到容器并显示
                    container.append(newEvent);
                    newEvent.fadeIn(200);
                    eventCount++;
                });
            });
        }

        // 设置表单提交处理
        function setupFormSubmission() {
            $('#multi-site-form').submit(function(e) {
                // 验证输出变量
                const outputVariables = $('#output-data-hidden').val().trim();
                if (!outputVariables) {
                    e.preventDefault();
                    showAlert('请至少添加一个输出变量', 'danger');
                    return false;
                }

                // 验证站点
                if ($('#sites-container').children('.site-row').length === 0) {
                    e.preventDefault();
                    showAlert('请至少添加一个站点', 'danger');
                    return false;
                }

                // 表单提交前显示加载状态
                showLoading('正在保存和提交...');
            });
        }

        // 实用工具函数 - 显示提示
        function showAlert(message, type = 'success') {
            // 移除可能已经存在的提示
            $('.floating-alert').remove();

            // 创建新提示
            const alertDiv = $(`<div class="alert alert-${type} floating-alert" role="alert">${message}</div>`);
            $('body').append(alertDiv);

            // 自动消失
            setTimeout(function() {
                alertDiv.fadeOut(300, function() {
                    $(this).remove();
                });
            }, 2000);
        }

        // 实用工具函数 - 显示加载中
        function showLoading(message = '加载中...') {
            // 移除可能已经存在的提示
            $('.floating-alert').remove();

            // 创建加载提示
            const loadingDiv = $(`<div class="alert alert-info floating-alert" role="alert">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                ${message}
            </div>`);
            $('body').append(loadingDiv);
        }
    </script>
</body>
</html>